<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.line{border-bottom:3px solid lightgray}
	.border-lavener{
		border: 1px solid #e6e6fa;
	}
	
	.musicContainer{
		max-width: none!important;
		width: 940px;
	}
	
	.titleSection{
		position: relative;
		min-height: 30px;
		border: 1px solid #e6e6fa;
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 5px;
		margin-bottom: 5px;
		background-color: #f5f5f5;
	}
	
	.contentSection{
		height: 420px;	
	}

	.freeContainer:before, .freeContainer:after,
	.titleSection:before, .titleSection:after,
	.contentSection:before, .contentSection:after{
		content: " ";
		display: table;
	}
	:before, :after{
		box-sizing: border-box;
	}
	.freeContainer:after, .titleSection:after,
	.contentSection.after{
		clear: both;
	}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript">
var content = "";
var conNo = "";
var currentPosition = "";
var numberOfComment = "";
var notAdopted = ${requestScope.bvo.adopted!=true};
var currentCommentPage="";
var totalPage = "";
function toGetComments(pType, pUrl, pData, pDataType){
	 $.ajax({
		type:pType,
		url:pUrl,
		data:pData,
		dataType:pDataType,
		success:function(jsonData){
			var out = "";
			$.each(jsonData.list, function(index, comment){
				var comNo=comment.no;
				var content=comment.content;
				out+="<tr>";               
				out+="<td width=\"150px\" class=\"line\">" + "<img src=\"${initParam.memberPhotoPath }" + comment.memberVO.picturePath + "\" width='24px' height='24px'>";
				out+=" " + comment.memberVO.nickname+"</td>";
				out+="<td width=\"450px\" class=\"line\"><span id="+mp(comNo)+">";
				if(comment.choice=="y")
					out+="<img src=\"${initParam.adoptPath }\" width='48px' height='48px'>";
				out+="<pre style=\"border: 0\">"+content+"</pre></span></td>";
				out+="<td width=\"100px\" class=\"line\">" + comment.date + "</td>";
				out+="<td width=\"300px\" class=\"line\"><span id="+mp((index+1)+"button")+">";
				if(comment.memberVO.id=='${sessionScope.mvo.id}'&&comment.choice!="y"){
                 out+= "<input type=\"button\" value=\"수정\">"
                 +"<input type='button' value='삭제'>";
				}else if(("${sessionScope.mvo.id}"=="${requestScope.bvo.memberVO.id}")&&
						(notAdopted)&&
						("${requestScope.bvo.kind}"!="공지")){
							 out+= "<input type=\"button\" value=\"채택\">"; 

				}
				out+="</span>";//
				out+="</td></tr>";
			});
			var pb = jsonData.pagingBean;
			totalPage = pb.totalPage;
			if(totalPage>1){
				currentCommentPage = pb.nowPage;
				out+="<tr><td colspan=\"4\" align=\"center\">";
				if(pb.previousPageGroup)
					out+="<a href=\"#\" class=\"goToThePage\" id=" + mp(pb.startPageOfPageGroup-1) + ">◀</a> ";
				for(var p = pb.startPageOfPageGroup; p<=pb.endPageOfPageGroup; p++){
					out+="<a href=\"#\" class=\"goToThePage\" id=" + mp(p) + ">" + p + "</a>";
					if(p!=pb.endPageOfPageGroup)
						out+=" | ";
				}
				if(pb.nextPageGroup)
					out+=" <a href=\"#\" class=\"goToThePage\" id=" + mp(pb.endPageOfPageGroup+1) + ">▶</a>";
				out+="</td></tr>";
			}
			/*<c:if test="${requestScope.listAndPage.pagingBean.previousPageGroup}">
		<a href="${initParam.root }getQnAList.ju?page=${requestScope.listAndPage.pagingBean.startPageOfPageGroup - 1 }&title=${requestScope.listAndPage.pagingBean.title}"> ◀ </a>
	</c:if>
	<c:forEach var="p" begin="${requestScope.listAndPage.pagingBean.startPageOfPageGroup }"
	 end="${requestScope.listAndPage.pagingBean.endPageOfPageGroup }">
		<a href="${initParam.root }getQnAList.ju?page=${p}&title=${requestScope.listAndPage.pagingBean.title}">${p }</a>
		<c:if test="${p != requestScope.listAndPage.pagingBean.endPageOfPageGroup}">| 
		</c:if>
	</c:forEach>
	<c:if test="${requestScope.listAndPage.pagingBean.nextPageGroup}">
		<a href="${initParam.root }getQnAList.ju?page=${requestScope.listAndPage.pagingBean.endPageOfPageGroup + 1 }&title=${requestScope.listAndPage.pagingBean.title}"> ▶ </a>
	</c:if>		*/
			$("#commentBody").html(out);
			
		},
		error:function(){
			alert("timeout error..");
		},
		timeout:3000
	});
}

	$(document).ready(function(){
		toGetComments("post", "getCommentQnA.ju", "boardNo=${requestScope.bvo.no }", "json");
		$("#commentBody").on("click", "tr td span input[value=수정]", function(){
			//alert($(this).parent().parent().parent().children("td:eq(1)").children("span").children("pre").text());//
			/* alert($(this).parent().parent().parent().children("td:eq(0)").children("span").children("pre").text());//comment.memberVO.id
			alert($(this).parent().parent().parent().children("td:eq(1)").children("span").prop("id"));//mp(conNo)
			alert($(this).parent().parent().parent().children("td:eq(1)").children("span").text());//mp(content)
			alert($(this).parent().parent().parent().children("td:eq(3)").children("span").prop("id"));//mp(index+1)
			alert($("#commentBody").children("tr").size());//mp(data.length) */

			//var memId = $(this).parent().parent().parent().children("td:eq(0)").children("span").text();
			content = $(this).parent().parent().parent().children("td:eq(1)").children("span").children("pre");
			conNo = content.parent().prop("id");
			currentPosition = $(this).parent().parent().parent().children("td:eq(3)").children("span").prop("id");
			numberOfComment = ($("#commentBody").children("tr").size());
			if(totalPage>1)
				numberOfComment-=1;
				
			//alert(numberOfComment);
			//$("#commentFoot").html("");
			$("#commentContent").attr("readonly", true);
			$("#registerComment").attr("disabled", true);
		     for(var i=1; i<=numberOfComment; i++){
		     	var buttonBlock = $("#"+i+"button");
		        if((i+"button")==currentPosition){
		        	content.html("<textarea cols=\"58\" rows=\"2\" id='updateCommentContent' style=\"resize:none\">" + content.text() + "</textarea>");
		        	buttonBlock.html("<input type='button' id='toUpdate' value='확인'><input type='button' id='cancelUpdateComment' value='취소'>");
		        }else{
		        	buttonBlock.html("");
		        }
		     }
			
		});
		
		//$("#commentBody").on("click", "tr td:eq(2) span input[value=삭제]", function(){
		$("#commentBody").on("click", "tr td span input[value=삭제]", function(){
			if(confirm("삭제하시겠습니까?")){
				content = $(this).parent().parent().parent().children("td:eq(1)").children("span").children("pre");
				conNo = content.parent().prop("id");
				//conNo = $(this).parent().parent().parent().children("td:eq(1)").children("span").prop("id");
				toGetComments("post", "deleteCommentQnA.ju", "no=" + conNo + "&boardNo=${requestScope.bvo.no}", "json");
				conNo="";
				content="";
			}
			//alert($(this).children("td:eq(1)").children("span").prop("id"));
		//click을 ready로 바꾼뒤 안에서 click이벤트를 bind 한다.
		});
		$("#commentBody").on("click", "#toUpdate", function(){
			//conNo = $(this).parent().parent().prop("id");
			toGetComments("post", "modifyCommentQnA.ju", "no=" + conNo + "&content=" + encodeURIComponent($("#updateCommentContent").val()) + "&boardNo=${requestScope.bvo.no}&page=" + currentCommentPage, "json");
			$("#commentContent").attr("readonly", false);
			$("#registerComment").attr("disabled", false);
			conNo = "";
			content = "";
		});
		$("#commentBody").on("click", "tr td span input[value=취소]", function(){
			$("#commentContent").attr("readonly", false);
			$("#registerComment").attr("disabled", false);
			toGetComments("post", "getCommentQnA.ju", "no=${requestScope.bvo.no }", "json");
			conNo="";
			content="";
		});
		$("#commentBody").on("click", "tr td span input[value=채택]", function(){
			if(confirm("채택하시겠습니까?")){
			content = $(this).parent().parent().parent().children("td:eq(1)").children("span").children("pre");
			conNo = content.parent().prop("id");
			toGetComments("post", "choiceCommentQnA.ju", "no=" + conNo + "&boardNo=${requestScope.bvo.no}&page=" + currentCommentPage, "json");
			conNo = "";
			content="";
			notAdopted = false;
			}
		});
		$("#commentBody").on("click", "tr td .goToThePage", function(){
			//alert($(this).prop("id"));
			toGetComments("post", "getCommentQnA.ju", "boardNo=${requestScope.bvo.no }&page=" + $(this).prop("id") , "json");
		});
		
		
		$("#toList").click(function(){
			location.href="getQnAList.ju";
		});
		$("#toDelete").click(function(){
			if(confirm("삭제하시겠습니까?"))
				location.href="deleteQnA.ju?no=${requestScope.bvo.no}";
		});
		$("#toModify").click(function(){
			if(confirm("수정하시겠습니까?"))
				location.href="getQnADataToModify.ju?no=${requestScope.bvo.no}";
		});
		
		$("#registerComment").click(function(){
			if($("#commentContent").val()==""){
				alert("댓글 내용을 입력하세요.");
			}else{
				toGetComments("post", "writeCommentQnA.ju", "boardNo=${requestScope.bvo.no }&content=" + encodeURIComponent($("#commentContent").val()), "json");
				$("#commentContent").val("");
			}
			
		});
	});
function mp(p){
	return "'" + p + "'";
}
</script>

</head>
<body>
<!-- 내용 -->
<div  id="upper_main"><!-- right div -->
	<div class="titleSection">
		<strong><b>${bvo.title }</b></strong>
		<span style="float: right;">${bvo.date }</span>
	</div>
	<div class="titleSection">
	<img src="${initParam.memberPhotoPath }${bvo.memberVO.picturePath}"  width='24px' height='24px'>
		${bvo.memberVO.nickname }
		<span style="float: right;">조회수 ${bvo.hit }</span>
	</div>
	
	<div class="titleSection">
		<pre style="border: 0">${bvo.content }</pre>
	</div>
<!-- 	<input type="button" id="toList" value="목록"> -->
	<img src="${initParam.root }img/listBtn.png" height="25px" id="toList">
	<c:if test="${sessionScope.mvo.id==requestScope.bvo.memberVO.id||(sessionScope.mvo.grade=='admin'&&requestScope.bvo.kind!='공지')}">
		<!-- <input type="button" id="toDelete" value="삭제"> -->
		<img src="${initParam.root }img/deleteBtn.png" height="25px" id="toDelete">
	</c:if>
	<c:if test="${sessionScope.mvo.id==requestScope.bvo.memberVO.id}">
		<!-- <input type="button" id="toModify" value="수정"> -->
		<img src="${initParam.root }img/ModifyBtn.png" height="25px" id="toModify">
	</c:if>
	<br>
	<hr color="black">
	<br>
	<%-- <table width="600" border="1" cellpadding="5">
	<tr>
		<td>글번호:	<span id="qnaNo">${requestScope.bvo.no }</span></td>
		<td colspan="2"><b>${requestScope.bvo.title }</b></td>
	</tr>
	<tr>
		<td>작성자:	${requestScope.bvo.memberVO.nickname }</td>
		<td>작성일시: ${requestScope.bvo.date }</td>
		<td>조회수:	${requestScope.bvo.hit }</td>
	</tr>
	<tr>
		<td colspan="3"><pre>${requestScope.bvo.content }</pre></td>
	</tr>
	<tr>
		<td valign="middle" align="center" colspan="3">
		 <img class="action" id="toList" src="${initParam.root}img/list_btn.jpg">
		 <c:if test="${sessionScope.mvo.id==requestScope.bvo.memberVO.id||(sessionScope.mvo.grade=='admin'&&requestScope.bvo.kind!='공지')}">
		 	<img class="action"  id="toDelete" src="${initParam.root}img/delete_btn.jpg" > 
		 </c:if>
		 <c:if test="${sessionScope.mvo.id==requestScope.bvo.memberVO.id}">
		 	<img class="action"  id="toModify" src="${initParam.root}img/modify_btn.jpg" >
		 </c:if>
		</td>
	</tr>
	</table> --%>
	

	
</div>
<div id="lower_main">
<!-- 댓글 테이블 -->          
<table border="0" cellpadding="5" width="800">
<!-- 달려있는 댓글창 -->
	<tbody id="commentBody">
	<%-- <c:forEach items="${requestScope.bvo.commentList }" var = "commentList" varStatus="i">
		<tr>      
			<td>${commentList.memId }</td>
			<td><span id="${commentList.commentNo}">${commentList.reComment }</span></td>                  	 
			<td>
				<span id="${i.count}button">
				<c:if test="${commentList.memId==sessionScope.mvo.memId }">
					<input type="button" value="수정"
 						onclick="updateComment('${commentList.commentNo}', '${commentList.reComment }','${i.count}','${fn:length(requestScope.bvo.commentList)}')">
					<input type="button" value="삭제" onclick="deleteComment('${commentList.commentNo}')">
				</c:if>
				<c:if test="${commentList.memId!=sessionScope.mvo.memId}">
					<input type="button" value="관심댓글에 추가" onclick="cartComment('${commentList.commentNo}')">
				</c:if>                
   				</span>
   			</td>
		</tr>               
	</c:forEach> --%>
	</tbody>
	<!-- 댓글입력창 -->
	<tfoot id="commentFoot" >
	<c:if test="${not empty sessionScope.mvo}">
	<tr>
	   <td width="300px" align="left">${sessionScope.mvo.nickname }</td>
		<td width="450px" align="center"><textarea cols="62" rows="2" id="commentContent" style="resize:none"></textarea></td>
		<td width="150px" align="right">
		<!-- <input type="button" id="registerComment" value="댓글등록"> -->
		<img src="${initParam.root }img/commentsBtn.png" height="25px" id="registerComment">
		</td>
	</tr>
	</c:if>
	</tfoot>
</table>
</div>
		
</body>
</html>